<template>
  <div class="video-learning">
    <ul class="video-header">
      <li v-for="(item, index) in videoCategories" :key="index" @click="handleChangeView(item)"
          :class="{active: item.name === activeName}">
        {{ item.name }}
      </li>
    </ul>
    <div class="video-list">
      <div class="video-card" v-for="(video, index) in data" :key="index">
        <a :href="video.link" target="_blank">
          <img :src="video.thumbnail" :alt="video.title" class="video-thumbnail" />
          <div class="video-title">{{ video.title }}</div>
        </a>
      </div>
    </div>
    <div class="pagination">
      <el-pagination @current-change="handleCurrentChange" background layout="total,prev,pager,next"
                     :current-page="currentPage" :page-size="pageSize" :total="videoDatas.length">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getAllVideos, getVideosByCategory } from '../api/index';
import { videoCategories } from '../../../../qdyy/online_music1/src/assets/data/videos';

export default {
  name: "VideoLearning",
  data() {
    return {
      videoDatas: [],      // 视频数据
      pageSize: 15,        // 页面大小，一页有15条数据
      currentPage: 1,      // 当前页，默认第一页
      videoCategories: [], // 视频分类
      activeName: '全部视频' // 当前分类
    };
  },
  computed: {
    // 计算当前卡片中的数据
    data() {
      return this.videoDatas.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
    }
  },
  mounted() {
    this.videoCategories = videoCategories;
    this.getVideoList();
  },
  methods: {
    getVideoList() {
      getAllVideos()
          .then(res => {
            this.currentPage = 1;
            this.videoDatas = res;
          });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    handleChangeView(item) {
      this.activeName = item.name;
      this.videoDatas = [];
      if (item.name === '全部视频') {
        this.getVideoList();
      } else {
        this.getVideosByCategory(item.type);
      }
    },
    getVideosByCategory(category) {
      getVideosByCategory(category)
          .then(res => {
            this.currentPage = 1;
            this.videoDatas = res;
          });
    }
  }
};
</script>

<style scoped>
div,
ul,
li {
  box-sizing: border-box;
}

.video-learning {
  margin: 30px 10%;
  margin-top: 90px;
  padding-bottom: 50px;
  background-color: #ffffff;
}

.video-header {
  width: 100%;
  padding: 0 40px;
}

li {
  display: inline-block;
  line-height: 40px;
  margin: 40px 20px 15px 20px;
  font-size: 20px;
  font-weight: 400;
  color: #67757f;
  cursor: pointer;
}

li.active {
  color: black;
  font-weight: 600;
  border-bottom: 4px solid black;
}

.video-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.video-card {
  width: 300px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
}

.video-thumbnail {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.video-title {
  padding: 10px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.pagination {
  justify-content: flex-start;
  align-items: stretch;
  flex-direction: row;
  flex-wrap: nowrap;
  display: flex;
  margin-left: 530px;
}
</style>
